<template>
  <div class="container">
    <!-- 左侧面板 -->
    <div class="panel left-panel">
      <h2>方向光控制</h2>
      <div class="control-group">
        <div class="control-item">
          <label>X轴位置: {{ directionalLightPosition.x.toFixed(2) }}</label>
          <input 
            type="range" 
            min="-50" 
            max="50" 
            step="0.5" 
            v-model.number="directionalLightPosition.x"
            @input="updateDirectionalLightPosition"
          />
        </div>
        <div class="control-item">
          <label>Y轴位置: {{ directionalLightPosition.y.toFixed(2) }}</label>
          <input 
            type="range" 
            min="0" 
            max="50" 
            step="0.5" 
            v-model.number="directionalLightPosition.y"
            @input="updateDirectionalLightPosition"
          />
        </div>
        <div class="control-item">
          <label>Z轴位置: {{ directionalLightPosition.z.toFixed(2) }}</label>
          <input 
            type="range" 
            min="-50" 
            max="50" 
            step="0.5" 
            v-model.number="directionalLightPosition.z"
            @input="updateDirectionalLightPosition"
          />
        </div>
        <div class="control-item">
          <label>强度: {{ directionalLightIntensity.toFixed(2) }}</label>
          <input 
            type="range" 
            min="0" 
            max="2" 
            step="0.1" 
            v-model.number="directionalLightIntensity"
            @input="updateDirectionalLightIntensity"
          />
        </div>
        <div class="control-item">
          <label>颜色:</label>
          <input 
            type="color" 
            v-model="directionalLightColor"
            @input="updateDirectionalLightColor"
          />
        </div>
        <div class="control-item">
          <label>
            <input 
              type="checkbox" 
              v-model="showLightHelper"
              @change="toggleLightHelper"
            />
            显示光源辅助线
          </label>
        </div>
      </div>
    </div>
    
    <!-- 右侧面板 -->
    <div class="panel right-panel">
      <h2>人物控制</h2>
      <div class="control-group">
        <div class="control-item">
          <label>X坐标: {{ personPosition.x.toFixed(2) }}</label>
          <input 
            type="range" 
            min="-10" 
            max="10" 
            step="0.1" 
            v-model.number="personPosition.x"
          />
        </div>
        <div class="control-item">
          <label>Z坐标: {{ personPosition.z.toFixed(2) }}</label>
          <input 
            type="range" 
            min="-10" 
            max="10" 
            step="0.1" 
            v-model.number="personPosition.z"
          />
        </div>
        <div class="control-item">
          <button @click="movePerson" class="move-button">移动人物</button>
        </div>
      </div>
      
      <div class="control-group">
        <h2>报警控制</h2>
        <div class="control-item">
          <button @click="startAlarm" class="alarm-button">报警</button>
          <button @click="stopAlarm" class="stop-alarm-button">停止报警</button>
        </div>
      </div>
      
      <div class="control-group">
        <h3>说明</h3>
        <p>使用滑块调整人物目标位置，点击"移动人物"按钮使人形方块移动到指定位置。</p>
        <p>点击"报警"按钮使人形方块发出红色闪烁光芒，同时屏幕边缘也会出现红色闪烁效果，点击"停止报警"按钮恢复正常。</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive, getCurrentInstance } from 'vue'

// 定义props接收threeJSViewer实例
const props = defineProps({
  threeJSViewer: {
    type: Object,
    default: null
  }
})

// 获取当前实例以访问父组件
const instance = getCurrentInstance()

// 方向光位置状态 - 设置更自然的默认位置
const directionalLightPosition = ref({
  x: 15,
  y: 25,
  z: 15
})

// 方向光强度状态 - 设置更柔和的默认强度
const directionalLightIntensity = ref(0.7)

// 方向光颜色状态 - 设置温暖的阳光色调
const directionalLightColor = ref('#ffffff')

// 是否显示光源辅助线
const showLightHelper = ref(false)

// 人物位置状态
const personPosition = reactive({
  x: 2,
  z: 2
})

// 更新方向光位置
function updateDirectionalLightPosition() {
  if (props.threeJSViewer && props.threeJSViewer.setDirectionalLightPosition) {
    props.threeJSViewer.setDirectionalLightPosition(directionalLightPosition.value)
  }
}

// 更新方向光强度
function updateDirectionalLightIntensity() {
  if (props.threeJSViewer && props.threeJSViewer.setDirectionalLightIntensity) {
    props.threeJSViewer.setDirectionalLightIntensity(directionalLightIntensity.value)
  }
}

// 更新方向光颜色
function updateDirectionalLightColor() {
  if (props.threeJSViewer && props.threeJSViewer.setDirectionalLightColor) {
    props.threeJSViewer.setDirectionalLightColor(directionalLightColor.value)
  }
}

// 切换光源辅助线显示
function toggleLightHelper() {
  if (props.threeJSViewer && props.threeJSViewer.toggleDirectionalLightHelper) {
    props.threeJSViewer.toggleDirectionalLightHelper(showLightHelper.value)
  }
}

// 移动人物到指定位置
function movePerson() {
  if (props.threeJSViewer && props.threeJSViewer.movePersonToPosition) {
    props.threeJSViewer.movePersonToPosition(personPosition.x, personPosition.z)
  }
}

// 启动报警
function startAlarm() {
  // 启动ThreeJSViewer中的报警效果
  if (props.threeJSViewer && props.threeJSViewer.startAlarm) {
    props.threeJSViewer.startAlarm()
  }
  
  // 启动布局组件中的边缘报警效果
  const app = instance?.appContext?.app
  if (app && app.config && app.config.globalProperties) {
    const layout = app.config.globalProperties.$layout
    if (layout && layout.startAlarmEffect) {
      layout.startAlarmEffect()
    }
  }
}

// 停止报警
function stopAlarm() {
  // 停止ThreeJSViewer中的报警效果
  if (props.threeJSViewer && props.threeJSViewer.stopAlarm) {
    props.threeJSViewer.stopAlarm()
  }
  
  // 停止布局组件中的边缘报警效果
  const app = instance?.appContext?.app
  if (app && app.config && app.config.globalProperties) {
    const layout = app.config.globalProperties.$layout
    if (layout && layout.stopAlarmEffect) {
      layout.stopAlarmEffect()
    }
  }
}

// 组件挂载后初始化方向光位置和强度
onMounted(() => {
  // 延迟一点时间确保ThreeJSViewer已经初始化
  setTimeout(() => {
    updateDirectionalLightPosition()
    updateDirectionalLightIntensity()
    updateDirectionalLightColor()
  }, 100)
})
</script>

<style scoped>
.container {
  width: 100%;
  height: 100%;
  position: relative;
  box-sizing: border-box;
  /* 确保容器可以接收鼠标事件穿透 */
  pointer-events: none;
}

.panel {
  position: absolute;
  top: 80px; /* 顶栏高度50px + 间距30px */
  width: 300px; /* 可根据需要调整宽度 */
  height: calc(100vh - 110px); /* 顶部80px + 底部30px = 110px */
  background-color: rgba(255, 255, 255, 0.9);
  box-sizing: border-box;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  /* 面板需要接收鼠标事件 */
  pointer-events: auto;
  overflow-y: auto;
  /* 确保面板在正确的z轴层级上 */
  z-index: 10;
}

.left-panel {
  left: 30px;
}

.right-panel {
  right: 30px;
}

.panel h2 {
  margin-top: 0;
  color: #333;
}

.panel h3 {
  margin-top: 0;
  color: #555;
}

.panel p {
  color: #666;
}

.control-group {
  margin-bottom: 20px;
}

.control-item {
  margin-bottom: 15px;
}

.control-item label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  color: #555;
}

.control-item input[type="range"] {
  width: 100%;
}

.control-item input[type="color"] {
  width: 100%;
  height: 40px;
}

.control-item input[type="checkbox"] {
  margin-right: 8px;
}

.move-button {
  width: 100%;
  padding: 10px;
  background-color: #409eff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

.move-button:hover {
  background-color: #337ecc;
}

.alarm-button {
  width: 48%;
  padding: 10px;
  background-color: #f56c6c;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  margin-right: 4%;
}

.alarm-button:hover {
  background-color: #dd6161;
}

.stop-alarm-button {
  width: 48%;
  padding: 10px;
  background-color: #909399;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

.stop-alarm-button:hover {
  background-color: #82848a;
}
</style>